import React from 'react';
import { Link } from 'react-router-dom';
import {
  Button,
  Card,
  Container,
  Stack,
  Group,
  Text,
  Title,
  Grid,
  Box,
  Center
} from '@mantine/core';

const HomePage: React.FC = () => {
  const features = [
    {
      title: '企业级架构',
      description: '采用分层架构设计，包含服务层、组件层、工具层等，便于维护和扩展。',
      icon: (
        <svg className="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
      ),
    },
    {
      title: 'TypeScript 支持',
      description: '完整的 TypeScript 类型定义，提供更好的开发体验和代码质量保障。',
      icon: (
        <svg className="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
      ),
    },
    {
      title: '响应式设计',
      description: '基于 Tailwind CSS 的响应式设计，适配各种设备和屏幕尺寸。',
      icon: (
        <svg className="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
      ),
    },
    {
      title: '自定义 Hooks',
      description: '丰富的自定义 Hooks 库，封装常用的状态管理和副作用逻辑。',
      icon: (
        <svg className="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      ),
    },
    {
      title: '组件库',
      description: '完整的 UI 组件库，包含按钮、输入框、模态框等常用组件。',
      icon: (
        <svg className="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z" />
        </svg>
      ),
    },
    {
      title: '最佳实践',
      description: '遵循 React 最佳实践，包含错误处理、性能优化、代码分割等。',
      icon: (
        <svg className="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
        </svg>
      ),
    },
  ];

  const stats = [
    { name: '组件数量', value: '20+' },
    { name: 'Hook 函数', value: '15+' },
    { name: '工具函数', value: '30+' },
    { name: 'TypeScript', value: '100%' },
  ];

  return (
    <Container size="lg">
      <Stack gap="xl">
        {/* Hero Section */}
        <Center>
          <Stack align="center" gap="lg">
            <Title order={1} size="h1" ta="center" c="dark">
              React.js 企业级
              <Text component="span" c="blue" inherit>
                应用示例
              </Text>
            </Title>
            <Text size="xl" c="dimmed" ta="center" maw={800}>
              这是一个完整的 React.js 企业级应用示例，展示了现代前端开发的最佳实践，
              包含分层架构、TypeScript、自定义 Hooks、组件库等核心特性。
            </Text>
            <Group justify="center">
              <Button component={Link} to="/users" size="lg">
                查看用户管理
              </Button>
              <Button component={Link} to="/products" variant="outline" size="lg">
                浏览产品展示
              </Button>
            </Group>
          </Stack>
        </Center>

        {/* Stats Section */}
        <Card withBorder p="xl" bg="blue.0">
          <Grid>
            {stats.map((stat) => (
              <Grid.Col key={stat.name} span={{ base: 6, md: 3 }}>
                <Center>
                  <Stack align="center" gap="xs">
                    <Text size="xl" fw={700} c="blue">{stat.value}</Text>
                    <Text c="dimmed">{stat.name}</Text>
                  </Stack>
                </Center>
              </Grid.Col>
            ))}
          </Grid>
        </Card>

        {/* Features Section */}
        <Stack gap="xl">
          <Center>
            <Stack align="center" gap="md">
              <Title order={2} ta="center">核心特性</Title>
              <Text size="lg" c="dimmed" ta="center" maw={600}>
                采用现代化的技术栈和架构设计，为企业级应用开发提供坚实的基础。
              </Text>
            </Stack>
          </Center>

          <Grid>
            {features.map((feature, index) => (
              <Grid.Col key={index} span={{ base: 12, md: 6, lg: 4 }}>
                <Card withBorder h="100%" p="lg">
                  <Stack gap="md">
                    <Group gap="md">
                      <Box>{feature.icon}</Box>
                      <Title order={4}>{feature.title}</Title>
                    </Group>
                    <Text c="dimmed">{feature.description}</Text>
                  </Stack>
                </Card>
              </Grid.Col>
            ))}
          </Grid>
        </Stack>

        {/* Architecture Section */}
        <Card withBorder p="xl" bg="gray.0">
          <Stack gap="xl">
            <Center>
              <Stack align="center" gap="md">
                <Title order={2}>架构设计</Title>
                <Text size="lg" c="dimmed">
                  清晰的分层架构，便于维护和扩展
                </Text>
              </Stack>
            </Center>

            <Grid>
              <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
                <Card withBorder p="lg" bg="white">
                  <Stack align="center" gap="md">
                    <Box w={48} h={48} bg="blue.1" style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="24" height="24" fill="none" stroke="var(--mantine-color-blue-6)" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z" />
                      </svg>
                    </Box>
                    <Title order={4}>组件层</Title>
                    <Text size="sm" c="dimmed" ta="center">UI 组件和业务组件</Text>
                  </Stack>
                </Card>
              </Grid.Col>

              <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
                <Card withBorder p="lg" bg="white">
                  <Stack align="center" gap="md">
                    <Box w={48} h={48} bg="green.1" style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="24" height="24" fill="none" stroke="var(--mantine-color-green-6)" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                      </svg>
                    </Box>
                    <Title order={4}>Hooks 层</Title>
                    <Text size="sm" c="dimmed" ta="center">自定义 Hooks 和状态管理</Text>
                  </Stack>
                </Card>
              </Grid.Col>

              <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
                <Card withBorder p="lg" bg="white">
                  <Stack align="center" gap="md">
                    <Box w={48} h={48} bg="violet.1" style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="24" height="24" fill="none" stroke="var(--mantine-color-violet-6)" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
                      </svg>
                    </Box>
                    <Title order={4}>服务层</Title>
                    <Text size="sm" c="dimmed" ta="center">API 调用和数据处理</Text>
                  </Stack>
                </Card>
              </Grid.Col>

              <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
                <Card withBorder p="lg" bg="white">
                  <Stack align="center" gap="md">
                    <Box w={48} h={48} bg="yellow.1" style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="24" height="24" fill="none" stroke="var(--mantine-color-yellow-6)" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                      </svg>
                    </Box>
                    <Title order={4}>工具层</Title>
                    <Text size="sm" c="dimmed" ta="center">通用工具和辅助函数</Text>
                  </Stack>
                </Card>
              </Grid.Col>
            </Grid>
          </Stack>
        </Card>

        {/* CTA Section */}
        <Card withBorder p="xl" style={{ background: 'linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-violet-6))' }}>
          <Center>
            <Stack align="center" gap="lg">
              <Title order={2} c="white">开始探索</Title>
              <Text size="xl" c="white" style={{ opacity: 0.9 }}>
                查看完整的代码实现和架构设计
              </Text>
              <Group justify="center">
                <Button
                  component={Link}
                  to="/users"
                  variant="white"
                  size="lg"
                >
                  用户管理示例
                </Button>
                <Button
                  component={Link}
                  to="/products"
                  variant="outline"
                  size="lg"
                  style={{ borderColor: 'white', color: 'white' }}
                >
                  产品展示示例
                </Button>
              </Group>
            </Stack>
          </Center>
        </Card>
      </Stack>
    </Container>
  );
};

export default HomePage;